<template>
	<navbar title="城市巡回" :isBack="true"></navbar>
	<view style="width: 100%;height: 300rpx;position: relative;">
		<image :src="Info.banner"   style="width: 100%;height: 300rpx;"></image>
		<view class=""
			style="width: 144rpx;height: 42rpx;border-radius: 17rpx;display: flex;position: absolute;bottom: 23rpx;right: 26rpx;background-color: rgba(255, 255, 255, 0.55);">
			<view class=""
				style="width: 72rpx;height: 42rpx;display: flex;justify-content: center;align-items: center;font-size: 20rpx;transition: all .3s ;"
				v-for="(item,index) in tabs" :class="item.isActive ? 'active':'noactive'" @click="clickTabs(index)">
				{{item.name}}
			</view>
		</view>
	</view>
	
	<view class="page" style="margin-top: -85rpx;" >
		<view class="" style="display: flex;background-color: white;padding-left: 30rpx;">
			<view class="" style="width: 200rpx;height: 200rpx;z-index: 2;">
				<image :src="Info.cover" style="width: 200rpx;height: 200rpx;border-radius: 20rpx;z-index: 2;" mode="aspectFill">
				</image>
			</view>
			<view class="" style="margin-left: 30rpx;margin-top: 100rpx;">
				<view class="" style="font-size: 40rpx;font-weight: bold;">
					{{Info.address}}
				</view>
				<view class="" style="margin-top: 10rpx;font-size: 20rpx;">
					{{Info.en_name}}
				</view>
			</view>
		
		</view>
		<view class="" style="color: #F00505;font-weight: bold;background-color: white;padding:40rpx 30rpx 0 30rpx;">
			<span style="font-size: 26rpx;">￥</span>
			<span style="font-size: 48rpx;">{{Info.price}}</span>
		</view>
		<view class=""
			style="display: flex;justify-content: space-between;align-items: center;padding-bottom: 30rpx;border-bottom: 1rpx solid #ececec;padding: 30rpx;background-color: white;">
			<view class="" style="display: flex;align-items: center;">
				<image src="../../static/version1.2/place.png" style="width: 24rpx;height: 30rpx;" mode=""></image>
				<view class="" style="font-size: 28rpx;font-weight: bold;margin-left: 10rpx;">
					{{Info.province}}{{Info.city}}
				</view>
			</view>
			<view class="" @click="place"
				style="padding: 10rpx 18rpx;background-color: #EBEDF0;display: flex;justify-content: center;align-items: center;border-radius: 30rpx;">
				<image src="../../static/version1.2/tg1.png" style="width: 20rpx;height: 20rpx;" mode=""></image>
				<view class="" style="font-size: 24rpx;color: #75777A;margin-left: 10rpx;">
					导航
				</view>
			</view>
		</view>
		<view class=""
			style="display: flex;justify-content: space-between;align-items: center;padding-bottom: 30rpx;border-bottom: 1rpx solid #ececec;padding: 30rpx;background-color: white;">
			<view class="" style="display: flex;align-items: center;">
				<image src="../../static/version1.2/time.png" style="width: 24rpx;height: 24rpx;" mode=""></image>
				<view class="" style="font-size: 28rpx;font-weight: bold;margin-left: 10rpx;">
					开始时间：{{Info.start_date}}
				</view>
			</view>
		</view>
		<view class=""
			style="display: flex;justify-content: space-between;align-items: center;padding-bottom: 30rpx;border-bottom: 1rpx solid #ececec;padding: 30rpx;background-color: white;">
			<view class="" style="position: relative;display: flex;height: 60rpx;">
				<view class="" v-for="(item,index) in Info.avatar"
					style="width: 60rpx;height: 60rpx;border-radius: 30rpx;position: absolute;"
					:style="'left:' + index * 23 + 'px'">
					<image :src="item" mode=""
						style="width: 60rpx;height: 60rpx;border-radius: 30rpx;position: absolute;border: 3px solid white;"></image>
				</view>
			</view>
			<view class="" style="display: flex;min-width: 100rpx;">
				<view class="" style="margin-right: 20rpx;">

					<span v-if="Info.enroll_num">{{Info.enroll_num}}人已购</span>
					<span v-else>暂无人购买</span>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="" style="padding-bottom: 30rpx;padding: 30rpx;background-color: white;">
			<view class="" style="font-size: 33rpx;font-weight: bold;">
				详情介绍
			</view>
			<view class="" v-html="Info.detail" style="margin-top: 30rpx;">

			</view>
		</view>
	</view>
	<view class="" style="background-color: white;position: fixed;bottom: 0rpx;width: 100%;">
		<view class=""
			style="width: 100%;height: 100rpx;display: flex;justify-content: center;align-items: center;color: white;font-size: 32rpx;padding-left: 5rpx;">
			<button open-type="contact" style="background-color: white;padding: 0;margin-top: 10rpx;">
				<view class=""
					style="display: flex;flex-direction: column;align-items: center;height: 100rpx;justify-content: center;padding: 0 20rpx;margin-left: 40rpx;">
					<image src="/static/version1.2/kf.png" mode="" style="width: 36rpx;height: 36rpx;"></image>
					<view class="" style="font-size: 24rpx;color: #2C2C2C;white-space: nowrap;">
						客服
					</view>
				</view>
			</button>
			<button open-type="share" style="background-color: white;padding: 0;margin-top: 10rpx;">
				<view class=""
					style="display: flex;flex-direction: column;align-items: center;height: 100rpx;justify-content: center;padding: 0 20rpx;margin-left: 40rpx;">
					<image src="/static/version1.2/tg2.png" mode="" style="width: 36rpx;height: 36rpx;"></image>
					<view class="" style="font-size: 24rpx;color: #2C2C2C;white-space: nowrap;">
						分享
					</view>
				</view>
			</button>
			<view class="" @click="sumbit" v-if="Info.status == 1 && Info.is_enroll == 0"
				style="width: 100%;height: 100rpx;background: linear-gradient(90deg, #5062A7 0%, #354678 100%);display: flex;justify-content: center;align-items: center;color: white;margin-left: 50rpx;font-size: 32rpx;">
				立即报名
			</view>
			<view class="" @click="pay" v-if="Info.status == 1 && Info.is_enroll == 1"
				style="width: 100%;height: 100rpx;background: linear-gradient(90deg, #5062A7 0%, #354678 100%);display: flex;justify-content: center;align-items: center;color: white;margin-left: 50rpx;font-size: 32rpx;">
				去支付
			</view>
			<view class="" v-if="Info.is_enroll == 2"
				style="width: 100%;height: 100rpx;background: #ABABAB;display: flex;justify-content: center;align-items: center;color: white;margin-left: 50rpx;font-size: 32rpx;">
				已报名
			</view>
			<view class="" v-if="Info.status == 0  || Info.status == 2 || Info.status == 3 || Info.status == 4"
				style="width: 100%;height: 100rpx;background: #ABABAB;display: flex;justify-content: center;align-items: center;color: white;margin-left: 40rpx;font-size: 32rpx;">
				<span v-if="Info.status == 0">报名未开始</span>
				<span v-if="Info.status == 2">报名已结束</span>
				<span v-if="Info.status == 3">上课中</span>
				<span v-if="Info.status == 4">已结束</span>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { ref, reactive } from 'vue'
	import { cityIndex, details } from '@/service/api/city'
	import tools from '@/utils/tools'
	const bannerList = ref([1, 2, 3]);
	const tabs = ref([
		{
			name: "图片",
			isActive: true,
		},
		{
			name: "视频",
			isActive: false
		}
	])

	const id = ref('')
	onLoad((opt) => {
		id.value = opt.id;
	})
	onShow(() => {
		getData()
	})
	const Info = reactive({
		id: "",
		state: "",
		avatar: [1, 2, 3] as any,
		status: 1,
		is_enroll: 0,
		banner: "",
		cover: "",
		detail: "",
		address: "",
		price: "",
		province: "",
		city: "",
		start_date: "",
		latitude: "",
		longitude: "",
		en_name: "",
		enroll_num: "",
		enroll_id:""
	})
	const clickTabs = (index : number) => {
		tabs.value.forEach((item, i) => {
			if (i == index) {
				item.isActive = true;
			} else {
				item.isActive = false;
			}
		})
	  tools.navTo('/pagesB/city/imageList?id=' + Info.id);
	}
	const getData = async () => {
		const res = await details({ id: id.value });
		for (let i in Info) {
			if (res.msg[i]) {
				Info[i] = res.msg[i];
			}
		}
		 
		
		console.log(res);
	}
	const sumbit = () => {
		uni.navigateTo({
			url: '/pagesB/speededUp/fill?id=' + Info.id + '&type=1'
		})
		//0是报名 1是预约
		// if (index == 0) {
		// 	uni.navigateTo({
		// 		url: '/pagesB/speededUp/fill?id=' + item.id + '&type=1'
		// 	})
		// } else {
		// 	uni.navigateTo({
		// 		url: '/pagesB/custom/agree'
		// 	})

		// }
	}
	//去支付
	const pay = () => {
		if (Info.enroll_id) {
			tools.navTo('/pagesB/order/pay?id=' + Info.enroll_id + '&type=2');
		} else {
			tools.showToast('没有订单ID')
		}
	}
	//打开地图
	const place = () => {
 
	
		let param = {
			scale: 1,
			longitude: Number(Info.longitude),
			latitude: Number(Info.latitude)
		}
		//tools.openLocation(param);
	}
</script>

<style scoped lang="scss">
	.page {
		min-height: calc(100vh - 68px);
	//	background-color: #F8F8F9;
	background-color: white;
		overflow: hidden;
		padding-bottom: 100rpx;
	}

	.title-right {
		display: flex;
		align-items: center;

		.image {
			width: 36rpx;
			height: 36rpx;
		}

		.text {
			font-size: 28rpx;
			margin-left: 5rpx;
		}
	}

	.active {
		background-color: white;
		color: black;
		border-radius: 17rpx;

	}

	.noactive {

		color: white;
		//border-radius: 17rpx;
		//transition-duration: 0.3s;

	}

	.border-r {
		border-radius: 17rpx;
	}

	.border-l {
		border-left: 17rpx;
	}
</style>